import { time } from 'echarts'

// 公共样式
export const commonStyle = {
    rotate: 0,
    opacity: 1,
}

export const commonAttr = {
    animations: [],
    events: {},
    groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
    isLock: false, // 是否锁定组件
    collapseName: 'style', // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
    linkage: {
        duration: 0, // 过渡持续时间
        data: [ // 组件联动
            {
                id: '', // 联动的组件 id
                label: '', // 联动的组件名称
                event: '', // 监听事件
                style: [{ key: '', value: '' }], // 监听的事件触发时，需要改变的属性
            },
        ],
    },
}

// 编辑器左侧组件列表
const list = [
    {
        component: 'VText',
        label: '文字',
        type: "xzj",
        propValue: {
            text: "双击编辑文字"
        },
        icon: 'wenbenkuang',
        image: require("../assets/componentImage/wz.jpg"),
        style: {
            width: 200,
            height: 28,
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            padding: 4,
            fontFamily: ''
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        type: "xzj",
        image: require("../assets/componentImage/tp.jpg"),
        propValue: {
            fileType: 0,
            url: require('../assets/title.jpg'),
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 300,
            height: 200
        },
    },
    {
        component: 'Ie',
        label: '网页',
        type: "xzj",
        icon: 'a-24neiqianwangye',
        image: require("../assets/componentImage/ie.jpg"),
        propValue: {
            url: "http://datav.jiaminghi.com/"
        },
        style: {
            width: 200,
            height: 100
        },
    },
    {
        component: 'Weather',
        label: '天气',
        type: "xzj",
        icon: 'tianqi',
        image: require("../assets/componentImage/tq.jpg"),
        propValue: {
            text: "25℃~30℃ 晴天",
            border: 0,
            fontSize:15
        },
        style: {
            width: 100,
            height: 50,
            color: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            padding: 4,
            border: 0,
            fontFamily: ''
        },
    },
    {
        component: 'Time',
        label: '时间',
        type: "xzj",
        icon: 'shijian',
        image: require("../assets/componentImage/sj.jpg"),
        propValue: {
            time: "00:00",
            fontSize:15
        },
        style: {
            width: 100,
            height: 28,
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            padding: 4,
            border: 0,
            fontFamily: ''
        },
    },
    {
        component: 'VTimepiece',
        label: '钟表',
        type: "xzj",
        icon: 'zhongbiao',
        image: require("../assets/componentImage/zp.jpg"),
        propValue: {
            time: "00:00",
            fontSize:15
        },
        style: {
            width: 100,
            height: 100,
            borderRadius: '',
        },
    },
    {
        component: 'Todate',
        label: '日期',
        type: "xzj",
        icon: '24gl-calendar',
        image: require("../assets/componentImage/rq.jpg"),
        propValue: {
            date: "0000-00-00",
            fontSize:15
        },
        style: {
            width: 200,
            height: 28,
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            padding: 4,
            border: 0,
            fontFamily: ''
        },
    },
    {
        component: 'ManInfo',
        label: '多人员信息',
        type: 'info',
        icon: 'yonghuxinxi-',
        image: require("../assets/componentImage/yonghuxinxi.jpg"),
        propValue: {
            title: "人员信息",
            color: "#fff",
            border: 0,
            titleColor: "#000",
            user: "",
            userList: [],
            nameColor: "#000",
            remarkColor: "#000",
            nameSize: 10,
            remarkSize: 10,
            statuSize: 10,
            isMuchMan: 0,
            ishasback: 1,
            avatarWidth: 170,
            avatarHeight: 200,
            interval: 3000
        },
        style: {
            width: 500,
            height: 400
        },
    },
    {
        component: 'ManInfo2',
        label: '单人员信息',
        type: 'info',
        icon: 'renwuxinxi',
        image: require("../assets/componentImage/ManInfo2.jpg"),
        propValue: {
            title: "人员信息",
            color: "#fff",
            border: 0,
            titleColor: "#fff",
            user: "",
            userList: '',
            nameColor: "#fff",
            remarkColor: "#fff",
            nameSize: 14,
            remarkSize: 14,
            statuSize: 14,
            statuColor: "#fff",
            isMuchMan: 0,
            ishasback: 1,
            avatarWidth: 170,
            avatarHeight: 200,
            interval: 3000
        },
        style: {
            width: 500,
            height: 240
        },
    },
    {
        component: 'ManInfo3',
        label: '单人员信息模板2',
        type: 'info',
        icon: 'renwuxinxi',
        image: require("../assets/componentImage/ManInfo3.jpg"),
        propValue: {
            title: "人员信息",
            color: "#fff",
            border: 0,
            titleColor: "#fff",
            user: "",
            userList: '',
            nameColor: "#fff",
            remarkColor: "#fff",
            nameSize: 14,
            remarkSize: 14,
            statuSize: 14,
            statuColor: "#fff",
            isMuchMan: 0,
            ishasback: 1,
            avatarWidth: 170,
            avatarHeight: 200,
            interval: 3000
        },
        style: {
            width: 500,
            height: 300
        },
    },
    {
        component: 'ManInfo4',
        label: '单人员信息模板3',
        type: 'info',
        icon: 'renwuxinxi',
        image: require("../assets/componentImage/ManInfo4.jpg"),
        propValue: {
            title: "人员信息",
            color: "#000",
            border: 0,
            titleColor: "#000",
            user: "",
            userList: '',
            nameColor: "#00",
            remarkColor: "#00",
            nameSize: 14,
            remarkSize: 14,
            statuSize: 14,
            statusWidth: 250,
            statusHeight: 45,
            statuColor: "#000",
            isMuchMan: 0,
            ishasback: 1,
            avatarWidth: 170,
            avatarHeight: 200,
            interval: 3000,
            backgroundImage: "linear-gradient(rgb(227, 30, 18), rgb(205,13,2))"
        },
        style: {
            width: 500,
            height: 300
        },
    },
    {
        component: 'Video',
        label: '视频',
        type: "xzj",
        icon: 'shipin',
        image: require("../assets/componentImage/sp.jpg"),
        propValue: {
            url: 'http://139.9.5.249:7777/MP4/tx1.mp4',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 300,
            height: 200,
            borderRadius: '',
        },
    },
    {
        component: 'VChart',
        label: '图表',
        type: "tb",
        icon: 'el-icon-data-analysis',
        image: require("../assets/componentImage/tb.jpg"),
        propValue: {
            chart: 'VChart',
            option: {
                title: {
                    text: '柱状图',
                    show: true,
                },
                legend: {
                    show: true,
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                },
                xAxis: {
                    show: true,
                    data: ['A', 'B', 'C', 'D', 'E'],
                },
                yAxis: {},
                series: {
                    type: 'bar',
                    name: '',
                    data: [23, 61, 35, 77, 35],
                    itemStyle: {
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        borderColor: '#73c0de',
                        shadowColor: '#5470c6',
                        shadowBlur: 3,
                    },
                },
            },
            mysql: {
                tableName: '',
                fieldNameY: '',
                fieldNameX: '',
                sql: '',
                data: [],
                total: 0,
                mysqlName: 'iot'
            }
        },
        style: {
            width: 800,
            height: 500,
            borderRadius: '',
        },
    },
    {
        component: 'VTable',
        label: '表格',
        type: "tb",
        icon: 'biaoge',
        image: require("../assets/componentImage/bg.jpg"),
        propValue: {
            data: [],
            stripe: true,
            thBold: true,
            columns: [],
            columns2: [],
            sql: "",
            total: 0,
            isTable: false,
            isHavePage: true,
            showSummary: false,
            showSummaryType: 0
        },
        request: {
            method: 'GET',
            data: [],
            columns: [],
            url: '',
            series: false,
            time: 1000,
            paramType: '', // string object array
            requestCount: 0, // 请求次数限制，0 为无限
            mysql: {
                mysqlName: "iot",
                tableName: "",
                fieldName: [],
                tableName2: "",
                fieldName2: [],
                list: "",
                tableNameList: []
            }
        },
        style: {
            width: 600,
            height: 300,
            fontSize: 14,
            fontWeight: 400,
            textAlign: 'center',
            color: '',
            backgroundColor: 'rgba(255, 255, 255, 1)',
        },
        
    },
    {
        component: 'VButton',
        label: '按钮',
        type: "xzj",
        propValue: '按钮',
        image: require("../assets/componentImage/an.jpg"),
        icon: 'anniu',
        style: {
            width: 100,
            height: 34,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame',
        label: '边框样式一',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk1.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame1',
        label: '边框样式二',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk2.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame2',
        label: '边框样式三',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk3.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame3',
        label: '边框样式四',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk11.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame4',
        label: '边框样式五',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk4.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame5',
        label: '边框样式六',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk5.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame6',
        label: '边框样式七',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk6.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame7',
        label: '边框样式八',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk7.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame8',
        label: '边框样式九',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk8.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame9',
        label: '边框样式十',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk9.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },
    {
        component: 'Frame10',
        label: '边框样式十一',
        type: "bk",
        propValue: {
            text: ""
        },
        image: require("../assets/componentImage/bk10.jpg"),
        icon: 'anniu',
        style: {
            width: 400,
            height: 200,
            borderWidth: 1,
            borderColor: '',
            borderRadius: '',
            fontSize: 14,
            fontWeight: 400,
            lineHeight: '',
            letterSpacing: 0,
            textAlign: '',
            color: '',
            backgroundColor: '',
        },
    },

    // 边框1
    // 边框2
    // 边框3
    // 边框4
    // 边框5
    // 边框6
    // 边框7
    // 边框8
    // 边框9
    // 边框10
    // 边框11
    // 边框12


    //飞线图

    // 装饰
]

const infoList =[
    {
        component: 'ManInfo2',
        label: '单人员信息',
        icon: 'renwuxinxi',
        image: require("../assets/componentImage/ManInfo2.jpg"),
        propValue: {
            title: "人员信息",
            color: "#fff",
            border: 0,
            titleColor: "#fff",
            user: "",
            userList: '',
            nameColor: "#fff",
            remarkColor: "#fff",
            nameSize: 14,
            remarkSize: 14,
            statuSize: 14,
            statuColor: "#fff",
            isMuchMan: 0,
            ishasback: 1,
            avatarWidth: 170,
            avatarHeight: 200,
            interval: 3000
        },
        style: {
            width: 500,
            height: 240
        },
    }
]

for (let i = 0, len = list.length; i < len; i++) {
    const item = list[i]
    item.style = { ...commonStyle, ...item.style }
    list[i] = { ...commonAttr, ...item }
}

for (let i = 0, len = infoList.length; i < len; i++) {
    const item = infoList[i]
    item.style = { ...commonStyle, ...item.style }
    infoList[i] = { ...commonAttr, ...item }
}

export default list
export { infoList }

